<template>
  <div class="goods-add">
   <!-- 步骤条 -->
   <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1" description="基本信息"></el-step>
      <el-step title="步骤 2" description="商品图片"></el-step>
      <el-step title="步骤 3" description="商品内容"></el-step>
   </el-steps>
   <!-- 左侧标签 -->
     <el-tabs v-model="activeTabs" @tab-click='tabClick' tab-position="left" >
        <el-tab-pane  name="0" label="基本信息">
            <el-form hide-required-asterisk  :model="form"  ref="form" label-width="100px">
              <el-form-item  label="商品名称" >
                 <el-input placeholder="请输入商品名称" v-model="form.goods_name"></el-input>
              </el-form-item>
              <el-form-item label="商品价格" >
                 <el-input placeholder="请输入商品价格" v-model="form.goods_price"></el-input>
              </el-form-item>
              <el-form-item label="商品重量" >
                 <el-input placeholder="请输入商品重量" v-model="form.goods_weight"></el-input>
              </el-form-item>
              <el-form-item label="商品数量" >
                 <el-input placeholder="请输入商品数量" v-model="form.goods_number"></el-input>
              </el-form-item>
              <el-form-item label="商品分类">
                  <el-cascader
                    v-model="form.goods_cat"
                    :options="options"
                    :props="props"
                   >
                  </el-cascader>
              </el-form-item>

           </el-form>
           <el-button @click="next" type="primary">下一步</el-button>
        </el-tab-pane>

        <el-tab-pane name="1" label="商品图片">
          <!-- active: 图片上传地址 -->
          <el-upload
              :action="$axios.defaults.baseURL+'upload'"
              list-type="picture-card"
              name="file"
              :headers="headers"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success= "hadnSuccess">
              <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <el-button @click="next" type="primary">下一步</el-button>
        </el-tab-pane>

        <el-tab-pane name="2" label="商品内容">
            <quill-editor v-model="form.goods_introduce"></quill-editor>
            <el-button type="primary" @click="addGood">添加</el-button>
        </el-tab-pane>
     </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      activeTabs: '',
      form: {
        goods_name: '',
        goods_cat: [],
        goods_price: '',
        goods_number: '',
        goods_weight: '',
        goods_introduce: '',
        pics: []
      },
      options: [],
      props: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      // =======
      dialogImageUrl: '',
      dialogVisible: false,
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }
  },
  created () {
    this.getGoodsAdd()
  },
  methods: {
    async getGoodsAdd () {
      const { data, meta } = await this.$axios.get('categories?type=3')
      // console.log(data)
      if (meta.status === 200) {
        this.options = data
      } else {
        this.$message.error(meta.msg)
      }
    },
    tabClick (tab, event) {
      // console.log(tab)
      // console.log(event)
      this.active = +tab.index
    },
    next () {
      this.active++
      this.activeTabs = this.active + ''
    },
    // =============
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview (file) {
      // console.log(file)

      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 图片移除
    handleRemove (file, fileList) {
      // console.log(file)
      // console.log(fileList)
      // 当删除图片是同时也要删除 form.pics 里对应的图片
      this.form.pics = this.form.pics.filter(itme => itme.pic !== file.response.data.tmp_path)
    },
    // 图片上传成功时的钩子
    hadnSuccess (res, file, fileList) {
      // console.log(res)
      // console.log(file)
      // console.log(fileList)
      this.form.pics.push({
        pic: res.data.tmp_path
      })
    },
    // 添加
    async addGood () {
      console.log(this.form)
      const { meta } = await this.$axios.post('goods', {
        ...this.form,
        goods_cat: this.form.goods_cat.join(',')
      })
      if (meta.status === 201) {
        this.$message({
          message: meta.msg,
          type: 'success',
          duration: 1000
        })
        this.$router.push('goods')
      } else {
        this.$message({
          message: meta.msg,
          type: 'error',
          duration: 1000
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
 .quill-editor {
  background-color: #fff;
  ::v-deep .ql-editor {
    min-height: 300px;
  }
}
</style>
